<template>
  <view>
	  <view v-for="(item,index) in list"  :key="index" class="content">
	  	<view @tap="openDetail(item.id)">
			<view class="row">
				<view class="address">{{item.complaintAddress}}</view>
				<view v-if="item.projectStatus === '1' && new Date().getTime()-new Date(item.updateTime).getTime()>60 * 60 *1000" class="overtime">{{'超时'}}</view>
				<view v-if="item.projectStatus === '1' && new Date().getTime()-new Date(item.updateTime).getTime()<=60 * 60 *1000" class="notovertime">{{'未超时' }}</view>
				
			</view>
	  		<view class="position">{{item.problemDescription}}</view>
			<view class="projectStatus">{{ getStatusDescription(item.projectStatus) }}</view>
	  		<view class="time">{{item.complaintDate}}</view>
	  	</view>
	  </view>
	  <view class="load-more-box">
			<uni-load-more v-if="status == '请求中'" status="正在加载..." :showIcon="true"></uni-load-more>
			<uni-load-more v-if="status == '没有更多'" status="没有更多了" :showIcon="false"></uni-load-more>
			<uni-load-more v-if="status == '暂无数据'" status="暂无数据" :showIcon="false"></uni-load-more>
			<uni-load-more v-if="status == '请求失败'" status="加载失败，点我重试" :showIcon="false" @click="reLoad"></uni-load-more>
		</view>
  </view>
</template>

<script>
	import { receivedOrderList } from "@/api/index"
	// import { getInteviewinfoList } from "@/api/work"
	
  export default {
	  computed: {
	      isOvertime() {
	        if (!this.item.updateTime) {
	          return false;
	        }
	        const currentTime = new Date().getTime();
	        const updateTime = new Date(this.item.updateTime).getTime();
	        const oneHour = 60 * 60 * 1000; // 一小时的毫秒数
	  
	        return (currentTime - updateTime) > oneHour;
	      }
	    },
		data() {
			return {
				statusDescriptions: {
				    '0': '未接单',
				    '1': '已接单',
				    '2': '已预约',
				    '3': '现场方案',
				    '4': '方案审核',
				    '5': '方案落地',
				    '6': '用户回访评估',
				    '7': '质检',
					'8': '问题闭环',
				},
				status: '',
				query: {
					pageNum:1,
					pageSize:10,
					overtimeWorkOrderFlag:'',
					processingTime:''
				},
				list:[],
				interviewGoal: 50,
				avatar:this.$store.state.user.avatar,
				name:this.$store.state.user.nickname,
				calendar:'农历正月初九',
				date:'2024年2月18日 星期日',
				datatime:'11:18:08',
				address:'南昌市 高新区 艾湖路恒大御景',
			}
		},
		onLoad() {
			this.query.pageNum = 1;
			this.list = [];
		},
		onShow() {
			this.query.pageNum = 1;
			this.list = [];
			this.getCountinterview()
		},
		onPullDownRefresh() {
			
			this.query.pageNum = 1;
			this.list = [];
			this.getCountinterview()
		},
	
		onReachBottom() {
			if(this.status=='请求更多'){
				this.query.pageNum++;
				//this.list = [];
				this.getCountinterview()
			}
		},
		methods: {
			getStatusDescription(status) {
			      return this.statusDescriptions[status] || '未知状态';
			    },
			getCountinterview() {
				this.status = '请求中';
				uni.showLoading({
				  title: '加载中...'
				});
			  receivedOrderList(this.query).then(res => {
				 let data = res.rows;
				 this.list = this.list.concat(data || []);
				this.changeStatus(res);
			  }).finally(()=>{
				  uni.hideLoading();
			  })
			},
			// 修改请求状态
			changeStatus(data) {
				if (this.list.length === 0) {
					this.status = '暂无数据';
				} else if (this.query.pageNum >= Math.ceil(data.total / this.query.pageSize)) {
					this.status = '没有更多';
				} else {
					this.status = '请求更多';
				}
			},
			// 打开详情页面
			openDetail(id) {
				this.$tab.navigateTo('/pages/common/webview/index?id='+id)
				// this.$tab.navigateTo('/pages/home/change?id='+id)
			},
			
		},
		
  }
</script>

<style scoped>
	page {
	  background-color: #F2F1F0;
	}
	
	.content {
	  background-color: #fff;
	  margin: 28upx 24upx;
	  border-radius: 18upx;
	  padding:20upx 3%;
	}
	.line {
		border-color: lightgray;
		width: 94%;
		height: 1upx;
		margin-top: 5upx;
		margin-left: 3%;
	}
	.address{
		color: #12a98e;
		font-size: 21px;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		float: left;
	}
	.overtime {
		font-size: 16px;
		margin: 16upx 0;
		padding-top: 10upx;
		text-align: right;
	}
	.projectStatus {
		font-size: 18px;
		margin: 16upx 0;
		float: left;
	}
	.time {
		font-size: 16px;
		margin: 16upx 0;
		text-align: right;
	}
	.position{
		margin-top: 20upx;
		font-size: 18px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp:3;
	}
	
	
	
	

  
  .row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  	margin-top: 10px;
  }
  
  .page {
	  display: flex;
	  flex-direction: column;
  	  width: 300upx;
  	  height: 220upx;
  	  /* background-color: #a7a6eb; */
  	  opacity: 0.15;
  	  border-radius:10%;
  	  /* margin-right: 20px; */
  }
  
  .subPage {
  	  display: flex;
  	  flex-direction: row;
	  margin-left: 20px;
	  margin-top: 12px;
  }
  
  .text1 {
	  
  }
  
  .text2 {
  	  margin-left: 30px;
  }
  
  .row1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	margin-top: 10px;
  }
  
  .row2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	margin-top: 10px;
  }
  
  .row3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	margin-top: 10px;
  }
  
  .page1 {
	  width: 300upx;
	  height: 220upx;
	  background-color: rgba(167, 166, 235, 0.15);
	  /* opacity: 0.15; */
	  border-radius:10%;
	  margin-right: 20px;
  }
  
  .page2 {
  	  width: 300upx;
  	  height: 220upx;
  	  background-color: rgba(219, 249, 202, 0.4);
	  /* opacity: 0.4; */
  	  /* border: 20upx solid; */
  	  /* border-color: #ffffff; */
  	  border-radius:10%;
  }
  
  .page3 {
  	  width: 300upx;
  	  height: 220upx;
  	  background-color: rgba(255, 120, 18, 0.15);
  	  /* opacity: 0.15; */
  	  /* border: 20upx solid; */
  	  /* border-color: #ffffff; */
  	  border-radius:10%;
	  margin-right: 20px;
  }
  
  .page4 {
  	  width: 300upx;
  	  height: 220upx;
  	  background-color: rgba(94, 96, 255, 0.2);
  	  /* opacity: 0.2; */
  	  /* border: 20upx solid; */
  	  /* border-color: #ffffff; */
  	  border-radius:10%;
  }
  
  .page5 {
  	  width: 300upx;
  	  height: 220upx;
  	  background-color: rgba(250, 230, 15, 0.1);
  	  /* opacity: 0.1; */
  	  /* border: 20upx solid; */
  	  /* border-color: #ffffff; */
  	  border-radius:10%;
	  margin-right: 20px;
  }
  
  .page6 {
  	  width: 300upx;
  	  height: 220upx;
  	  background-color: rgba(191, 21, 64, 0.1);
  	  /* opacity: 0.1; */
  	  /* border: 20upx solid; */
  	  /* border-color: #ffffff; */
  	  border-radius:10%;
  }
	
	.picture{
		width: 70upx;
		height: 70upx;
		margin-top: 20px;
		margin-left: 20px;
	}
.address {
  flex: 1;
  text-align: left;
}

.overtime {
  margin-left: 10px;
  text-align: right;
  color: red;
  font-size: 16px;
}
.notovertime{
	margin-left: 10px;
	text-align: right;
	color: orange;
	font-size: 16px;
}

</style>
